<template>
  <div class="flexed">
    <div class="header">
      <div class="nowCity" @click="onClickNowCity">
        <span class="nowCityName" v-if="CityStore.curCity.name">{{
          CityStore.curCity.name
        }}</span>
        <span class="noCheckCity" v-else>未选择城市</span>
        <van-icon name="arrow-down" class="cityDown" />
      </div>
      <div class="title">影院</div>
      <div class="searchCity" @click="onClickSearch">
        <van-icon name="search" />
      </div>
    </div>
    <div class="cityListTap">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item
          v-model="ticketFlag"
          :options="ticket"
          @change="ticketChange"
        />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
  </div>
  <van-list
    class="cityList"
    @load="onLoad"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
  >
    <cityItemVue
      v-for="item in cinemasData"
      :key="item.cinemaId"
      :item="item"
    />
  </van-list>
</template>
<script>
export default {
  name: "home-cinemas",
};
</script>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getCinemaList } from "../../api/cinemaList";
import cityItemVue from "../../component/city-item.vue";
import { useCityStore } from "../../stores/city";

const value1 = ref(0);
const ticketFlag = ref(1);
const value3 = ref(0);
const router = useRouter();
const CityStore = useCityStore();
const cityId = CityStore.curCity.cityId;

const loading = ref(false);
const finished = ref(false);

const cinemasData = ref([]);
const option1 = [{ text: "全城", value: 0 }];
const ticket = [
  { text: "APP订票", value: 1 },
  { text: "前台兑换", value: 2 },
];
const option3 = [
  { text: "最近去过", value: 0 },
  { text: "离我最近", value: 1 },
];

const onLoad = () => {
  getCinemaList(cityId, ticketFlag.value)
    .then((response) => {
      const {
        data: { cinemas },
      } = response;
      cinemasData.value.push(...cinemas); //返回数据
      console.log(cinemasData);
    })
    .finally(() => {
      finished.value = true;
    });
};

function ticketChange(value) {
  cinemasData.value = [];
  getCinemaList(cityId, value).then((response) => {
    const {
      data: { cinemas },
    } = response;
    cinemasData.value.push(...cinemas);
    console.log(cinemasData);
  });
}

function onClickNowCity() {
  router.push("/city");
}
function onClickSearch() {
  router.push("/cinemas-search");
}
</script>

<style lang="scss" scoped>
.flexed {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f2f2f2;
}
.header {
  width: 100%;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  display: flex;
  background-color: white;
  .nowCity {
    align-items: center;
    margin-left: 15px;
    .nowCityName {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 5px;
      color: #191a1b;
    }
    .noCheckCity {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 5px;
      color: black;
    }
    .cityDown {
      font-size: 12px;
    }
  }
  .title {
    height: 44px;
    font-size: 13px;
    flex: 1;
    text-align: center;
  }
  .searchCity {
    font-size: 20px;
    padding-right: 5px;
    color: #191a1b;
  }
}
.cityList {
  overflow-y: auto;
  flex: 1;
  height: 85%;
  margin-top: 92px;
  width: 100%;
}
</style>
